<template>
  <div class="login">
    <!-- 登录页面头部 -->
    <header>
      <van-nav-bar left-arrow @click-left="onClickLeft" />
    </header>

    <!-- 标题：验证码登录 -->
    <div class="title">
      <img src="../../../assets/mine-font/login/logo.png" alt="" />
      <h1>验证码登录</h1>
    </div>

    <!-- 登录表单 -->
    <div class="mess">
      <van-form @submit="onSubmit" validate-trigger="onChange">
        <van-cell-group inset>
          <!-- 手机号 -->
          <van-field
            v-model="loginData.username"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            :rules="[{ pattern, message: '请填写正确的手机号' }]"
            readonly
            clickable
            @touchstart.stop="(show1 = true), (show2 = false)"
          />
          <van-number-keyboard
            v-model="loginData.username"
            :show="show1"
            @blur="show1 = false"
          />
          <!-- 验证码 -->
          <van-field
            v-model="loginData.password"
            name="验证码"
            label="验证码"
            placeholder="验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
            readonly
            clickable
            @touchstart.stop="(show1 = false), (show2 = true)"
          >
            <template #button>
              <van-button v-if="yzmFlag" type="primary" @click="getyzm"
                >发送验证码</van-button
              >
              <van-button v-else type="primary" disabled
                >重新获取（{{ time }}）</van-button
              >
            </template>
          </van-field>
          <van-number-keyboard
            v-model="loginData.password"
            :show="show2"
            @blur="show2 = false"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button
            v-if="loginData.username && loginData.password"
            round
            block
            type="primary"
            native-type="submit"
          >
            提交
          </van-button>
          <van-button
            v-else
            round
            block
            type="primary"
            disabled
            native-type="submit"
          >
            提交
          </van-button>
        </div>
      </van-form>
    </div>
    <!-- 免验证登录 -->
    <div class="laissez-passer">
      <img src="../../../assets/mine-font/login/login.png" alt="" />
      <p>免验证登录</p>
    </div>
    <!-- 底部同意政策 -->
    <footer>
      <van-checkbox v-model="flag"
        >登录即表示同意<span>用户协议</span>和<span
          >隐私权政策</span
        ></van-checkbox
      >
    </footer>
  </div>
</template>

<script>
import { Toast } from "vant";
import { reactive, ref } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";

export default {
  setup() {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const onClickLeft = () => {
      router.go(-1);
    };
    const loginData = reactive({
      username: "",
      password: "",
    });

    const pattern =
      /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/;

    const getyzm = () => {
      if (pattern.test(loginData.username)) {
        getCode(loginData.username);
        yzmFlag.value = false;
        time.value = 30;
      } else if (!loginData.username) {
        Toast("请输入手机号");
      }
    };
    const onSubmit = (values) => {
      if (flag.value === true) {
        getCodeStatus({ phone: values.手机号, code: values.验证码 }).then(
          async (res) => {
            console.log(res);
            if (res.status === "0") {
              Toast("登录成功");
              router.push("/home");
            } else {
              Toast("验证码错误");
            }
          }
        );
      } else {
        Toast("请勾选底部同意用户协议和隐私权政策");
      }
    };

    // 获取验证码
    const getCode = (data) => store.dispatch("getCode", { phone: data });
    // 输入验证码判断
    const getCodeStatus = (data) =>
      store.dispatch("getCodeStatus", { phone: data.phone, code: data.code });

    const show1 = ref(false);
    const show2 = ref(false);

    // 判断是否已发送验证码
    let yzmFlag = ref(true);

    let time = ref(0);

    const loding = setInterval(() => {
      if (time.value > 0) {
        time.value--;
      } else {
        yzmFlag.value = true;
      }
    }, 1000);

    // 底部同意政策
    const flag = ref(false);

    return {
      onClickLeft,
      onSubmit,
      router,
      route,
      loginData,
      show1,
      show2,
      status,
      getyzm,
      getCode,
      getCodeStatus,
      pattern,
      yzmFlag,
      time,
      loding,
      flag,
    };
  },
};
</script>

<style lang="less">
.login {
  height: 100%;
  position: relative;
  header {
    // 去除登录页面头部底下的边框线
    .van-hairline--bottom:after {
      border-bottom-width: 0px;
    }
    .van-nav-bar .van-icon {
      color: #666 !important;
    }
  }
  // 标题：密码登录
  .title {
    height: 70px;
    display: flex;
    align-items: center;
    padding-left: 23px;
    img {
      width: 25.5px;
      height: 24px;
    }
    h1 {
      margin: 0;
      font-size: 24px;
      padding-left: 10px;
    }
  }
  // 登录表单
  .mess {
    .van-field__label {
      color: #000;
    }
    // .van-cell {
    // width: 335px;
    // font-size: 18px;
    // height: 60px;
    // line-height: 60px;
    // border-bottom: 1px solid #999;
    // margin: 0 20px;
    // }
    // 忘记密码
    .forget {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin: 18px 0 35px 0;
      .forget-text {
        font-size: 16px;
        color: #000;
        width: 100px;
      }
    }

    // 提交按钮
    .button-submit {
      display: flex;
      justify-content: center;
      align-items: center;
      .van-button {
        width: 314px;
        height: 47px;
        background: #a8d5fb;
        color: #d9edfd;
        font-size: 24px;
        border: none;
      }
    }
  }
  // 免验证登录
  .laissez-passer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 94px;
    img {
      width: 42px;
      height: 42px;
    }
    p {
      width: 100%;
      text-align: center;
      font-size: 12px;
      color: #999;
      margin: 7px 0;
    }
  }
  // 底部同意政策
  footer {
    width: 100%;
    position: fixed;
    bottom: 20px;
    left: 50px;
    .van-checkbox__label {
      font-size: 12.5px;
      color: #666;
      span {
        color: #247ded;
      }
    }
  }
}
</style>
